<template>
    <div class="login-body">
        <div class="login-container">
            <div class="head">
                <div class="name">
                    <div class="title">饭团外卖商家端</div>
                </div>
            </div>
            <el-form label-position="top" :rules="state.rules" :model="state.dataForm" ref="loginForm"
                     class="login-form">
                <el-form-item label="账号" prop="username">
                    <el-input type="text" v-model.trim="state.dataForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model.trim="state.dataForm.password" autocomplete="off" show-password></el-input>
                </el-form-item>
                <br>
                <el-form-item>
                    <div style="color: #333">登录表示您已同意<a>《服务条款》</a></div>
                    <el-button style="width: 100%" type="primary" @click="submitForm">立即登录</el-button>
                    <!--                    <el-checkbox v-model="state.checked" @change="!state.checked">下次自动登录</el-checkbox>-->
                </el-form-item>

            </el-form>
            <b><el-link class="register" type="primary" href="/register" style="font-size: 15px">注册账号</el-link></b>
        </div>
    </div>
</template>

<script setup>
    import {reactive, ref} from 'vue'
    import {login} from '@/api/user'
    import {useStore} from 'vuex'
    import {useRouter} from 'vue-router'
    import {ElMessageBox, ElMessage} from 'element-plus'
    const loginForm = ref(null)
    const store = useStore()
    const router = useRouter()
    const state = reactive({
        dataForm: {
            username: '',
            password: ''
        },
        rules: {
            username: [
                {required: 'true', message: '账户不能为空', trigger: 'blur'}
            ],
            password: [
                {required: 'true', message: '密码不能为空', trigger: 'blur'}
            ]
        }
    })
    const submitForm = () => {
        loginForm.value.validate((valid) => {
            if (valid) {
                login(state.dataForm).then((res) => {
                    console.log(res)
                    ElMessage.success("登录成功")
                    //保存用户名和id
                    //console.log(res.data)
                    store.commit('saveUsernameAndId', res.data)
                    console.log(res.data)
                    //保存token
                    store.commit("saveToken")
                    //跳转首页introduce
                    if(res.data.status==-1||res.data.status==0){
                        router.push({path:"/setup"})
                    }else {
                        router.push({path: "/"})
                    }
                })
            } else {

                return false;
            }
        })
    }
    const resetForm = () => {
        loginForm.value.resetFields();
    }
</script>

<style scoped>
    .login-body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: #fff;
    }

    .login-container {
        position: relative;
        width: 420px;
        height: 500px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2);
    }

    .head {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px 0 20px 0;
    }

    .head img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
    }

    .head .title {
        font-size: 28px;
        color: #1BAEAE;
        font-weight: bold;
    }

    .head .tips {
        font-size: 12px;
        color: #999;
    }

    .login-form {
        width: 70%;
        margin: 0 auto;
    }

    .login-form >>> .el-form--label-top .el-form-item__label {
        padding: 0;
    }

    .login-form >>> .el-form-item {
        margin-bottom: 0;
    }
    .register{
        position: absolute;
        bottom: 0;
        right: 0;
    }
</style>
